<template>
  <div class="admin-layout">
    <div class="sidebar">
      <div class="sidebar-header">
        <h2>管理面板</h2>
      </div>
      <nav class="sidebar-nav">
        <ul>
          <li v-if="hasPermission('/admin')">
            <router-link to="/admin" exact-active-class="active">首页</router-link>
          </li>
          <li class="has-submenu" :class="{ active: isOrderMenuOpen }" v-if="hasAnyOrderPermission()">
            <a href="#" @click.prevent="toggleOrderMenu">订单管理</a>
            <ul class="submenu">
              <li v-if="hasPermission('/admin/order/list')">
                <router-link to="/admin/order/list">工单列表</router-link>
              </li>
              <li v-if="hasPermission('/admin/order/create')">
                <router-link to="/admin/order/create">创建订单</router-link>
              </li>
              <li v-if="hasPermission('/admin/order/distribution-settings')">
                <router-link to="/admin/order/distribution-settings">订单分配</router-link>
              </li>
              <li v-if="hasPermission('/admin/order/dispatch-rule')">
                <router-link to="/admin/order/dispatch-rule">派单规则</router-link>
              </li>
              <li v-if="hasPermission('/admin/order/comments')">
                <router-link to="/admin/order/comments">订单评论</router-link>
              </li>
              <li v-if="hasPermission('/admin/order/archive')">
                <router-link to="/admin/order/archive">订单归档</router-link>
              </li>
            </ul>
          </li>
          <li class="has-submenu" :class="{ active: isCustomerMenuOpen }" v-if="hasAnyCustomerPermission()">
            <a href="#" @click.prevent="toggleCustomerMenu">客户管理</a>
            <ul class="submenu">

              <li v-if="hasPermission('/admin/customer/info')">
                <router-link to="/admin/customer/info">客户资料管理</router-link>
              </li>
              <li v-if="hasPermission('/admin/customer/individual')">
                <router-link to="/admin/customer/individual">普通类型客户</router-link>
              </li>
              <li v-if="hasPermission('/admin/customer/company')">
                <router-link to="/admin/customer/company">企事业单位客户</router-link>
              </li>
            </ul>
          </li>
          <li class="has-submenu" :class="{ active: isStaffMenuOpen }">
            <a href="#" @click.prevent="toggleStaffMenu">接单员管理</a>
            <ul class="submenu">
              <li>
                <router-link to="/admin/staff/location">位置信息</router-link>
              </li>
              <li>
                <router-link to="/admin/staff/rating">星级管理</router-link>
              </li>
              <li>
                <router-link to="/admin/staff/workload">负载管理</router-link>
              </li>
            </ul>
          </li>
          <li class="has-submenu" :class="{ active: isPermissionMenuOpen }" v-if="hasAnyPermissionPermission()">
            <a href="#" @click.prevent="togglePermissionMenu">用户权限管理</a>
            <ul class="submenu">
              <li v-if="hasPermission('/admin/permission/user')">
                <router-link to="/admin/permission/user">用户管理</router-link>
              </li>
              <li v-if="hasPermission('/admin/permission/role')">
                <router-link to="/admin/permission/role">角色管理</router-link>
              </li>
              <li v-if="hasPermission('/admin/permission/list')">
                <router-link to="/admin/permission/list">权限管理</router-link>
              </li>
            </ul>
          </li>
          <li class="has-submenu" :class="{ active: isSupplierMenuOpen }" v-if="hasAnySupplierPermission()">
            <a href="#" @click.prevent="toggleSupplierMenu">供应商管理</a>
            <ul class="submenu">
              <li v-if="hasPermission('/admin/supplier/info')">
                <router-link to="/admin/supplier/info">供应商信息</router-link>
              </li>
              <li v-if="hasPermission('/admin/supplier/product-type')">
                <router-link to="/admin/supplier/product-type">产品类型列表</router-link>
              </li>
              <li v-if="hasPermission('/admin/supplier/product-info')">
                <router-link to="/admin/supplier/product-info">产品信息</router-link>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
    <div class="main-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { useUserStore } from '@/stores/user'

export default {
  name: 'AdminLayout',
  data() {
    return {
      isCustomerMenuOpen: false,
      isOrderMenuOpen: false,
      isDistributionMenuOpen: false,
      isPermissionMenuOpen: false,
      isSupplierMenuOpen: false,
      isStaffMenuOpen: false
    }
  },
  methods: {
    toggleCustomerMenu() {
      this.isCustomerMenuOpen = !this.isCustomerMenuOpen;
    },
    toggleOrderMenu() {
      this.isOrderMenuOpen = !this.isOrderMenuOpen;
    },
    toggleDistributionMenu() {
      this.isDistributionMenuOpen = !this.isDistributionMenuOpen;
    },
    togglePermissionMenu() {
      this.isPermissionMenuOpen = !this.isPermissionMenuOpen;
    },
    toggleSupplierMenu() {
      this.isSupplierMenuOpen = !this.isSupplierMenuOpen;
    },
    toggleStaffMenu() {
      this.isStaffMenuOpen = !this.isStaffMenuOpen;
    },
    // 检查用户是否有指定路径的权限
    hasPermission(path) {
      const userStore = useUserStore()
      // 如果用户信息中包含权限列表，则检查权限列表中是否包含该路径
      if (userStore.userInfo && userStore.userInfo.permissions) {
        return userStore.userInfo.permissions.some(permission => permission.url === path)
      }
      // 默认情况下允许访问（为了向后兼容）
      return true
    },
    // 检查是否有任何订单相关权限
    hasAnyOrderPermission() {
      const orderPaths = [
        '/admin/order/list',
        '/admin/order/create',
        '/admin/order/distribution-settings',
        '/admin/order/dispatch-rule',
        '/admin/order/comments',
        '/admin/order/archive'
      ]

      return orderPaths.some(path => this.hasPermission(path))
    },
    // 检查是否有任何客户管理权限
    hasAnyCustomerPermission() {
      const customerPaths = [
        '/admin/customer/info',
        '/admin/customer/individual',
        '/admin/customer/company'
      ]

      return customerPaths.some(path => this.hasPermission(path))
    },
    // 检查是否有任何权限管理权限
    hasAnyPermissionPermission() {
      const permissionPaths = [
        '/admin/permission/user',
        '/admin/permission/role',
        '/admin/permission/list'
      ]

      return permissionPaths.some(path => this.hasPermission(path))
    },
    // 检查是否有任何供应商管理权限
    hasAnySupplierPermission() {
      const supplierPaths = [
        '/admin/supplier/info',
        '/admin/supplier/product-type',
        '/admin/supplier/product-info'
      ]

      return supplierPaths.some(path => this.hasPermission(path))
    }
  }
}
</script>

<style scoped>
.admin-layout {
  display: flex;
}

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 250px;
  background-color: #2c3e50;
  color: white;
  overflow-y: auto;
  z-index: 90;
  margin-top: 60px;
  /* 隐藏滚动条 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

.sidebar::-webkit-scrollbar {
  width: 0px; /* Chrome, Safari, Opera */
  background: transparent; /* Chrome, Safari, Opera */
}

.sidebar-header {
  padding: 20px;
  background-color: #1a252f;
}

.sidebar-header h2 {
  margin: 0;
  font-size: 1.5rem;
}

.sidebar-nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.sidebar-nav li {
  border-bottom: 1px solid #34495e;
}

.sidebar-nav a,
.sidebar-nav .router-link {
  display: block;
  padding: 15px 20px;
  color: #ecf0f1;
  text-decoration: none;
  transition: background-color 0.3s;
}

.sidebar-nav a:hover,
.sidebar-nav .router-link:hover {
  background-color: #34495e;
}

.sidebar-nav a.active,
.sidebar-nav .router-link.active {
  background-color: #3498db;
}

.sidebar-nav > ul > li > a {
  font-weight: 500;
  font-size: 1rem;
}

.sidebar-nav > ul > li.has-submenu > a {
  background-color: #2c3e50;
}

.sidebar-nav > ul > li.has-submenu > a:hover {
  background-color: #34495e;
}

.sidebar-nav > ul > li.has-submenu.active > a {
  background-color: #3498db;
}

.has-submenu > a::after {
  content: "▶";
  float: right;
  transition: transform 0.3s;
}

.has-submenu.active > a::after {
  transform: rotate(90deg);
}

.submenu {
  display: none;
  background-color: #34495e;
}

.has-submenu.active .submenu {
  display: block;
}

.submenu li {
  border-bottom: none;
}

.submenu a,
.submenu .router-link {
  padding: 10px 20px 10px 40px;
  font-size: 0.9rem;
  background-color: #34495e;
  color: #bdc3c7;
  border-left: 3px solid transparent;
}

.submenu a:hover,
.submenu .router-link:hover {
  background-color: #3d566e;
  color: #ecf0f1;
  border-left: 3px solid #3498db;
}

.submenu a.router-link-exact-active,
.submenu a.router-link-active,
.submenu .router-link-exact-active,
.submenu .router-link-active {
  background-color: #3d566e;
  color: #ecf0f1;
  border-left: 3px solid #3498db;
}

.main-content {
  flex: 1;
  margin-left: 0;
  margin-top: 0;
  padding: 0;
}
</style>